<%--
  Created by IntelliJ IDEA.
  User: YUAN
  Date: 2021/2/7
  Time: 19:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生登录页面</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet"/>
    <script src="./js/jquery-3.3.1.min.js" ></script>
    <script src="./js/bootstrap.min.js"></script>
</head>

<body style="padding: 100px;">
<div>
    <div>
        <button id="add" class="btn btn-primary" >新增</button>
        <button id="edit" class="btn btn-primary">编辑</button>
        <button id="del" class="btn btn-primary">删除</button>
        <button id="query" class="btn btn-primary">查询</button>
        <input id="inumber" type="text" placeholder="按工号查询">
        <input id="iname" type="text" placeholder="按姓名查询">
    </div>
    <div>
        <table id="idtable" class="table table-striped table-hover ">
            <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
            </thead>
            <tbody>
            <tr class="info">
                <td><input type="checkbox" name="item"></td>
                <td>1001</td>
                <td>张三</td>
                <td>女</td>
                <td>1234</td>
                <td>29</td>
                <td>1991-1-1</td>
            </tr>
            <tr class="warning">
                <td><input type="checkbox" name="item"></td>
                <td>1002</td>
                <td>李四</td>
                <td>男</td>
                <td>1234</td>
                <td>29</td>
                <td>1991-1-1</td>
            </tr>
            <tr class="info">
                <td><input type="checkbox" name="item"></td>
                <td>1003</td>
                <td>王五</td>
                <td>女</td>
                <td>1234</td>
                <td>29</td>
                <td>1993-3-3</td>
            </tr>
            <tr class="warning">
                <td><input type="checkbox" name="item"></td>
                <td>1004</td>
                <td>赵六</td>
                <td>男</td>
                <td>1234</td>
                <td>29</td>
                <td>1994-4-4</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script src="js/demo.js"></script>
<script>
    // 添加信息
    $("#add").click(function () {
        var res0 = prompt('请输入工号')
        var res1 = prompt('请输入姓名');
        var res2 = prompt('请输入性别');
        var res3 = prompt('请输入密码');
        var res4 = prompt('请输入年龄');
        var res5 = prompt('请输入出生日期');
        var str = $('<tr><td><input type="checkbox" name="item"></td><td>' + res0 + '</td><td>' + res1 + '</td><td>' + res2 + '</td><td>' + res3 + '</td><td>' + res4 + '</td><td>' + res5 + '</td></tr>');
        $("tbody").append(str);
    });

    // 删除信息
    $("#del").click(function () {
        if ($("input[name='item']:checked").length != 0) {
            if (confirm("是否删除该商品？")) {
                $("input[name='item']:checked").parents("tr").remove();
            }
        }
    });

    //编辑信息
    $("#edit").click(function () {
        var node = $("input[name='item']:checked").parent();
        if (node.length == 1) {
            var res0 = prompt('请输入工号');
            var res1 = prompt('请输入姓名');
            var res2 = prompt('请输入性别');
            var res3 = prompt('请输入密码');
            var res4 = prompt('请输入年龄');
            var res5 = prompt('请输入出生日期');
            node.next().text(res0);
            node.next().next().text(res1);
            node.next().next().next().text(res2);
            node.next().next().next().next().text(res3);
            node.next().next().next().next().next().text(res4);
            node.next().next().next().next().next().next().text(res5);
        } else{
            alert("一次只能编辑一个");
        }
    });

    //查询
    $("#query").click(function () {
        if ($("#inumber").val() != '' && $("#iname").val() == '') {
            var srr = $("tbody").find("tr")
            for (var i = 1; i <= srr.length; i++) {
                var a = $("tbody>tr:nth-of-type(" + i + ")>td:nth-of-type(2)").html();
                if (a == $("#inumber").val()) {
                    var al = "";
                    for (var j = 2; j < 8; j++) {
                        var arr = $("tbody>tr:eq(" + (i - 1) + ")>td:nth-of-type(" + j + ")").html();
                        al += arr + " ";
                    }
                    alert(al);
                    return;
                }
            }
            alert("请输入正确的工号或姓名！");
            return;
        }
        else if  ($("#iname").val() != '' && $("#inumber").val() == '') {
            var srr = $("tbody").find("tr")
            for (var i = 1; i <= srr.length; i++) {
                var a = $("tbody>tr:nth-of-type(" + i + ")>td:nth-of-type(3)").html();
                if (a == $("#iname").val()) {
                    var al = "";
                    for (var j = 2; j < 8; j++) {
                        var arr = $("tbody>tr:eq(" + (i - 1) + ")>td:nth-of-type(" + j + ")").html();
                        al += arr + " ";
                    }
                    alert(al);
                    return;
                }
            }
            alert("请输入正确的工号或姓名！");
            return;
        }
        else {
            alert("请输入正确的查询方式，只能选择一种")
        }
    });
</script>
</body>
</html>
